<template>
  <div class="all">
    <div id="title">
      <span class="name">Jacky</span>
      未来可期~
      <a href="https://gitee.com/jiadw/spring-study" class="button num1" target="_blank">gitee</a>
      <a href="https://www.jianshu.com/u/b2e7b1d932b9" class="button num2" target="_blank">简书</a>
    </div>
    <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect"
             active-text-color="red" text-color="black">

      <el-menu-item index="1">生成图表</el-menu-item>
      <el-menu-item index="2">过期提醒</el-menu-item>
      <el-menu-item index="3">扭一扭</el-menu-item>
      <el-menu-item index="4" disabled>自动化</el-menu-item>
    </el-menu>
    <div>
      <createPic v-if="activeIndex==='1'"></createPic>
      <expiredWarnning v-if="activeIndex==='2'"></expiredWarnning>
      <nyn v-if="activeIndex==='3'"></nyn>
      <autotest v-if="activeIndex==='4'"></autotest>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: '1',
      activepath: '1',
      x: ''
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      if (['1', '2', '3', '4'].includes(key)) {
        this.activeIndex = key
      }
      // console.log('key', key);
      // console.log('this.activeIndex', this.activeIndex);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  mounted: function () {
    if (this.$route.params.index === '3') {
      this.activeIndex = '3'
    }
  }
}
</script>

<style scoped>
/* 超链接去下划线*/
a {
  text-decoration: none;
}

li.el-menu-item:hover {
  background-color: #42b983;
}

body {
  margin: 0px;
  padding: 0px;
}

#title {
  text-align: left;
  padding: 10px;
  margin: 10px;
  font-size: 20px;
  /*height: 30px;*/
}

.name {
  text-shadow: 3px 3px yellow; /* 阴影效果 */
  /* font参数：font-style  font-weight  font-size（必填）/line-height  font-family（必填）*/
  font-style: italic;
  font-size: 25px;
}

.button {
  border: 1px solid yellow;
  border-radius: 15px 15px 15px 15px;
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: #42b983;
  /*!* 固定位置 *!*/
  /*position: fixed;*/
  /*z-index: 99;*/
}

.num1 {
  position: absolute;
  right: 40px;
}

.num2 {
  position: absolute;
  right: 110px;
}

a:hover {
  color: orange;
}

li:hover {
  color: orange;
}

.all {
  /*background: radial-gradient(circle at 90% 30%, #fd7248, #85de3e);!* 渐变色 *!*/
  /*background-image: url("../../src/assets/img.png");*/
  /*opacity: 0.8; !* 透明度 *!*/
  color: #333;
  text-align: center;
  height: 700px;
  position: relative;
}

</style>

